<template>
  <div>
    <h2>供货单</h2>
    <hr>

    <el-table
        :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%">
      <!--1.-->
      <el-table-column
          prop="code"
          label="供货单编号"
      >
      </el-table-column>
      <!--2.-->
      <el-table-column
          prop="name"
          label="供应商名称"
      >
      </el-table-column>
      <!--3.-->
      <el-table-column
          prop="type"
          label="类型">
      </el-table-column>

      <!--4.-->
      <el-table-column
          prop="specs"
          label="规格">
      </el-table-column>
      <!--4.-->
      <el-table-column
          prop="batch"
          label="批次">
      </el-table-column>
      <!--5.-->
      <el-table-column
          prop="goodsName"
          label="商品名称">
      </el-table-column>
      <!--6.-->
      <el-table-column
          prop="num"
          label="数量">
      </el-table-column>
      <!--7.-->
      <el-table-column
          prop="time"
          label="时间">
      </el-table-column>
      <!--8.-->
      <el-table-column
          prop="address"
          label="供应商地址">
      </el-table-column>
      <!--9.-->
      <el-table-column
          prop="state"
          label="供货单状态">
      </el-table-column>

      <!--10.-->
      <el-table-column
          label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="inStore(scope.row.providId)" :disabled="scope.row.state!='已发货'" >入库</el-button>
          <el-button type="text" size="small" @click="returnGoods(scope.row.providId)" :disabled="scope.row.state!='已发货'" >退货</el-button>
        </template>
      </el-table-column>


    </el-table>

    <!--页面选择导航--开始-->
    <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="pageSizes"
                     :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="totalCount">
      </el-pagination>
    </div>
    <!--页面选择导航--结束-->

  </div>
</template>

<script>
export default {

  //一、名称区
  name: "ShoppingStorage",
  //二、数据区
  data(){
    return{
      //1.分页表格数据--开始//
      tableData:[],
      totalCount:null,
      currentPage:1,
      pageSizes:[1,2,3,4],
      PageSize:3,
      //分页表格数据--结束//


    }
  },
  //三、方法区
  methods:{
    init(){

      this.$axios.get("/sscsys/providorder/findAllProvideOrder").then(
          r=>{

            this.tableData=r.data;
            this.totalCount=r.data.length;

          });
    },
    //1.分页表格换页方法--开始//
    handleSizeChange(val) {
      this.PageSize=val
      this.currentPage=1
    },
    handleCurrentChange(val) {
      this.currentPage=val
    },
//1.分页表格换页方法--结束//
    inStore(id){
      let that=this
      this.$axios.put("/sscsys/providorder/updateState/"+id+"/已入库").then(
          r=>{

           if(r.data=="ok"){
             this.$message.success("入库成功")
            that.init()
           }

          });
    },
    returnGoods(id){
      let that=this
      this.$axios.put("/sscsys/providorder/updateState/"+id+"/已退货").then(
          r=>{

            if(r.data=="ok"){
              this.$message.success("退货成功")
              that.init()
            }

          });
    }


  },
  //四、初始化区
  mounted() {
    this.init();
  }

}
</script>



<style scoped>

</style>